<template>
  <div class="profile_side_bar">
    <div class="user">
      <div class="avatar">
        <img :src="$store.state.userInfo.avatar" alt="">
      </div>
      <p class="nickname">{{$store.state.userInfo.nickname}}</p>
    </div>
    <div class="menu">
      <el-row>
        <el-col :span="24">
          <el-menu
            active-text-color="#002766"
            default-active="1"
            class="main_menu"
            :router="true"
            :unique-opened="true">
            <el-menu-item index="1" :route="'/profile/' + this.$store.state.userInfo.id + '/publish'">
              <i class="el-icon-document"></i>
              <span slot="title">我的发布</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-star-off"></i>
                <span>我的收藏</span>
              </template>
              <el-menu-item index="2-1" :route="'/profile/' + this.$store.state.userInfo.id + '/collect/interview'">收藏的面经</el-menu-item>
              <el-menu-item index="2-2" :route="'/profile/' + this.$store.state.userInfo.id + '/collect/question'">收藏的题库</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>我的设置</span>
              </template>
              <el-menu-item index="3-1" :route="'/profile/' + this.$store.state.userInfo.id + '/setting/account'">账号设置</el-menu-item>
              <el-menu-item index="3-2" :route="'/profile/' + this.$store.state.userInfo.id + '/setting/personal'">个人信息</el-menu-item>
            </el-submenu>
            <el-menu-item index="4" :route="'/profile/' + this.$store.state.userInfo.id + '/message'">
              <i class="el-icon-message-solid"></i>
              <span slot="title">我的消息</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ProfileSideBar",
    props: {

    }
  }
</script>

<style scoped>
  .profile_side_bar {
    float: left;
    width: 260px;
    height: calc(100vh - 64px);
    background-color: #fff;
  }

  .user {
    padding: 40px 0;
  }

  .user .avatar {
    overflow: hidden;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-color: #002766;
    border-radius: 40px;
  }

  .user .avatar img {
    width: 80px;
    height: 80px;
  }

  .user .nickname {
    margin-top: 30px;
    font-weight: 700;
    text-align: center;
    font-size: 18px;
  }

  .main_menu {
    border-right: transparent !important;
  }

</style>
